<html>
    <body>
        <form action="" id="register" method="post">
            <input type="text" placeholder="请输入用户名" name="username" />
            <input type="password" placeholder="请输入密码" name="password" />
            <input type="text" placeholder="请输入手机号" name="tel" />
            <button>提交</button>
        </form>
    </body>
    <script>
        var registerForm = document.getElementById('register');
        var strategies = {
            isNonEmpty: function(value, errMsg) {
                if (value === '') {
                    return errMsg;
                }
            },
            minLength: function(value, length, errMsg) {
                if (value.length < length) {
                    return errMsg;
                }
            },
            isMobile: function(value, errMsg) {
                if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
                    return errMsg;
                }
            }
        }

        var Validator = function() {
            this.cache = []; // 保存校验规则
        };
        // Validator.prototype.add = function(dom, rule, errMsg) {
        //     var ruleArr = rule.split(':');
        //     this.cache.push(function() {
        //         var strategy = ruleArr.shift(); // 规则名
        //         ruleArr.unshift(dom.value); // input的value添加进参数列表
        //         ruleArr.push(errMsg); // 把errMsg添加进参数列表;
        //         return strategies[strategy].apply(dom, ruleArr)
        //     })
        // }
        Validator.prototype.add = function(dom, rules) {
            var self = this;
            for (var i = 0; rule, rule = rules[i++]) {
                (function(rule){
                    var strategyArr = rule.strategy.split(':');
                    var errMsg = rule.errMsg;
                    self.cache.push(function() {
                        var strategy = strategyArr.shift();
                        strategyArr.unshift();
                        strategyArr.push(errMsg);
                        return strategies[strategy].apply(dom, strategyArr)
                    });
                })(rule)
            }
        }

        Validator.prototype.start = function() {
            for (var i = 0; validatorFunc; validatorFunc = this.cache[i++]) {
                var msg = validatorFunc(); // 开始校验
                if (msg) {
                    return msg;
                }
            }
        }

        var validatorFunc = function() {
            var validator = new Validator();
            // validator.add(registerForm.username, 'isNonEmpty', '用户名不能为空');
            validator.add(registerForm.username, [
                {
                    strategy: 'isNonEmpty',
                    errMsg: '用户名不能为空'
                },
                {
                    strategy: 'minLength:10',
                    errMsg: '用户名不能少于10位'
                }
            ]);
            validator.add(registerForm.password, [
                {
                    strategy: 'minLenth:6',
                    errMsg: '密码不能少于6位'
                }
            ]);
            validator.add(registerForm.tel, [
                {
                    strategy: 'isMobile',
                    errMsg: '手机号码不合法'
                }
            ]);
            var errMsg = validator.start();
            return errMsg;
        }

        registerForm.onsubmit = function() {
            var errMsg = validatorFunc();
            if (errMsg) {
                alert(errMsg);
                return false;
            }
        }

        // registerForm.onsubmit = function() {
        //     if (registerForm.username.value === '') {
        //         alert('用户名必填');
        //         return;
        //     }
        //     if (registerForm.password.value.length <= 6) {
        //         alert('密码要超过6位');
        //         return;
        //     }
        //     if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.tel.value)) {
        //         alert('手机号不合法');
        //         return;
        //     }
        // }
    </script>
</html>
